<script setup lang="ts">
import {ref,onMounted,getCurrentInstance, ComponentInternalInstance} from 'vue'
import {notes,user} from './../store/index'
// 是否置顶
const alwaysOnTop = ref<boolean>(false)
// 是否固定钉子
const drag = ref<boolean>(true)
const notesStore = notes()
const time = ref<any>()
/////////////////////////////////////////////////////////////////////////////////////////
// 色卡状态
const colorCardState = ref<boolean>();
// 色卡颜色列表
const color =ref(['#FFE66E','#A1EF9B','#FFAFDF','#D7AFFF','#9EDFFF','#E0E0E0','#767676'])
// 色卡选择方法
const setColor = function(color:string){
  console.log(router.currentRoute.value.fullPath)
  // 区分不同路径下的颜色变更
  if( router.currentRoute.value.fullPath === '/app/home'){
    notesStore.note.color = color
  }else if(router.currentRoute.value.fullPath == '/app/noteEditor'){
    notesStore.note.color = color
    // 变更工具栏 和 编辑栏背景色
    let text:any = document.getElementById('w-e-textarea-1');
    text.style.background =  color;
    let tool:any = document.getElementsByClassName('w-e-toolbar')[0];
    tool.style.background = color;
    let doc = document.getElementsByTagName('body')[0];
    doc.style.background = color
    notesStore.notes = JSON.parse(localStorage.getItem('notes') as string).notes
    notesStore.notes.filter((item,index)=>{
        if(item.noteid == appWindow.label){
            notesStore.notes[index].color = color
        }
    })
  }
  colorCardState.value = !colorCardState.value
}
///////////////////////////////////////////////
const { proxy } = getCurrentInstance() as any
/////////////////////////////////////////////////////////////////////////////////////////
// windowBar监听
import { appWindow,WebviewWindow } from '@tauri-apps/api/window' 
// 引入uuid函数
import { uuid } from './../function/index'
import {useRouter} from 'vue-router';
const router = useRouter()
const showadd = ref<boolean>(false)

// 组件初始化
onMounted(()=>{
  windowBar();
  if(router.currentRoute.value.fullPath == "/app/home"){
    showadd.value = true
  }
})

import { getAll } from '@tauri-apps/api/window'
import { app } from '@tauri-apps/api';
// 设置监听初始化函数
const windowBar =async function(){
  // home图标监听，打开列表窗口
  document.getElementById('titlebar-home')?.addEventListener('click',function(){
    // const win = new WebviewWindow('main',{
    //   title:'note',
    //   url:'/#/app/home',
    //   height:400,
    //   width:400,
    //   minWidth:400,
    //   minHeight:400,
    //   decorations: false,
    //   alwaysOnTop:false
    // })

    let windows = getAll();
    windows.filter((item)=>{
      if(item.label == "main"){
        item.show();
      }
    })
  })

  // 新增Note图标监听， 打开新的笔记，并生成唯一ID
  if(showadd){
    document.getElementById('titlebar-addnote')?.addEventListener('click',function(){
      clearTimeout(time.value)
      time.value = setTimeout(() => {
        const win = new WebviewWindow( uuid(),{
          title:'note',
          url:'/#/app/noteEditor',
          height:400,
          width:400,
          minWidth:400,
          minHeight:400,
          decorations: false,
          alwaysOnTop:false,
          skipTaskbar:true,
          transparent:true,
        })
        proxy.$wins.push(win)
        notesStore.noteids.push(win.label)
        // userStore.wins.push(win)
      }, 150);
    })
  }


  // 监听色卡图标点击事件，用于色卡的展开和收缩
  document.getElementById('titlebar-color')?.addEventListener('click',()=>{
    colorCardState.value = !colorCardState.value
  })

  // 切换 置顶层 和  最下层
  document.getElementById('titlebar-alwaysOnTop')?.addEventListener('click',()=>{
    appWindow.setAlwaysOnTop((alwaysOnTop.value = !alwaysOnTop.value))
  })

  document.getElementById('titlebar-getcolor')?.addEventListener('click',()=>{
    const screenshot = new WebviewWindow('titlebar-screenshot',{
      title:'取色',
      transparent:true,
      decorations:true,
      url:'/#/getcolor',
      width:100,
      height:100,
      fullscreen:true,
      resizable:false,
      skipTaskbar:true,
    })
  })

    // 截屏
  document.getElementById('titlebar-screenshot')?.addEventListener('click',function(){
    const screenshot = new WebviewWindow('titlebar-screenshot',{
      title:'截屏',
      transparent:true,
      decorations:true,
      url:'/#/screenshot',
      width:100,
      height:100,
      fullscreen:true,
      resizable:false,
      skipTaskbar:true,
    })
  })

  // 切换 是否可以拖动窗口
  document.getElementById('titlebar-drag')?.addEventListener('click',async ()=>{
    if(drag.value){
      document.getElementById('left')?.removeAttribute('data-tauri-drag-region')
      document.getElementById('right')?.removeAttribute('data-tauri-drag-region')
      document.getElementById('center')?.removeAttribute('data-tauri-drag-region')
      drag.value = !drag.value
    }else{
      document.getElementById('left')?.setAttribute('data-tauri-drag-region','')
      document.getElementById('right')?.setAttribute('data-tauri-drag-region','')
      document.getElementById('center')?.setAttribute('data-tauri-drag-region','')
      drag.value = !drag.value
    }
  })

  // 最小化
  document.getElementById('titlebar-minimize')?.addEventListener('click', () => {
    appWindow.minimize()
  })

  // 最大化
  document.getElementById('titlebar-maximize')?.addEventListener('click',async () => {
    console.log(await appWindow.toggleMaximize())
  })

  // 关闭窗口
  document.getElementById('titlebar-close')?.addEventListener('click', () => {
    if(notesStore.isnull){
        notesStore.notes = JSON.parse(localStorage.getItem('notes') as string).notes
        // if(notesStore.notes instanceof Array)
        notesStore.notes.filter((item,index)=>{
            if(item.noteid == appWindow.label){
                notesStore.notes.splice(index,1)
            }
        })
    }
    
    if(appWindow.label == "main"){
      appWindow.hide() 
    }else{
      appWindow.close();
    }
  }) 
}

// 获取路由 

</script>

<template>
  
  <div class="titlebar" v-show="notesStore.gettersShow" :style="{background:notesStore.note.color}">
    <!-- 左边功能区 -->
    <div class="left" data-tauri-drag-region id="left">
      <div class="titlebar-btn" id="titlebar-home" >
        <img class="title-icon" src="/icon/home.png"
        alt="Note列表"
        />
      </div>
      <div v-show="showadd" class="titlebar-btn" id="titlebar-addnote">
        <img class="title-icon" src="/icon/xinzeng1.png"
        alt="新增"
        />
      </div>
    </div>

    <!-- 中间功能区 -->
    <div class="center" data-tauri-drag-region id="center">
      <div class="titlebar-btn" id="titlebar-color" >
        <img class="title-icon" 
        src="/icon/yanse.png"
        alt="颜色"
        />
      </div>
      <div class="titlebar-btn" id="titlebar-getcolor" >
        <img 
          class="title-icon" 
          src="/icon/getcolor.png"
          alt="取色"
        />
      </div>
      <div class="titlebar-btn" id="titlebar-screenshot" >
        <img 
          class="title-icon" 
          src="/icon/screenshot.png"
          alt="截屏"
        />
      </div>
      <div class="titlebar-btn" id="titlebar-drag" >
        <img class="title-icon" 
        :src="drag?'/icon/map-thumbtack.png':'/icon/map-thumbtack-full.png'"
        alt="拖拽控制"
        />
      </div>
      <div class="titlebar-btn" id="titlebar-alwaysOnTop" >
        <img class="title-icon" 
        :src="alwaysOnTop?'/icon/zuishangceng_bring-to-front.png':'/icon/zuixiaceng_sent-to-back.png'"
        alt="置顶层"
        />
      </div>
    </div>

    <!-- 窗口操作 -->
    <div class="right" data-tauri-drag-region id="right">
      <div class="titlebar-button" id="titlebar-minimize">
        <img class="title-icon" src="/icon/zuixiaohua-1.png"
        alt="最小化"
        />
      </div>
      <div class="titlebar-button" id="titlebar-maximize">
        <img class="title-icon" src="/icon/zuidahua-1.png"
        alt="最大化"
        />
      </div>
      <div class="titlebar-button" id="titlebar-close">
        <img class="title-icon" src="/icon/guanbi1.png" alt="关闭" />
      </div>
    </div>
    
  </div>
  <router-view></router-view>

  <div class="selectColor">
    <div class="colorList">
      <div @click="setColor(item)" :style="{height:colorCardState?'80px':'0px',background:item}"  class="colorCard" v-for="item in color" :key="item" ></div>
    </div>
  </div>
 
</template>

<style>
/* 选择色卡 */
.selectColor{
  display: flex;
  position: absolute;
  width: 100vh;
  z-index: 99;
  background: rgba(200, 200, 200, 0.1);
  top: 30px;
}
.colorList{
  width: 100vw;
  display: flex;
  flex-direction: row;
}
.colorCard{
  transition: all 0.1s linear;
  width: 14.28%;
}


/* titlebar */
.title-icon {
  width:30px;
  height:30px;
  padding: 5px;
  box-sizing: border-box;
}

.titlebar {
  width: 100vw;
  height: 30px;
  user-select: none;
  display: flex;
  z-index: 99;
  flex-direction: row;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.left{
  width: 30%;
  background:rgba(200, 200, 200, 0.5);
  display: flex;
  justify-content: first baseline;
}
.center{
  width: 40%;
  background:rgba(200, 200, 200, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.right{
  background:rgba(200, 200, 200, 0.5);
  width: 30%;
  display: flex;
  justify-content: end;
}
.titlebar-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 30px;
}
.titlebar-button:hover {
  background: #5bbec3;
}
.titlebar-btn{
  margin-left: 0px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight:900;
}
.titlebar-btn:hover{
  background: #5bbec3;
}


</style>